<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本和字体样式示例</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>文本和字体样式示例</h1>
            <p class="subtitle">这个页面展示了不同的文本和字体样式效果</p>
        </header>

        <section class="demo-section">
            <h2>1. 字体系列示例</h2>
            <div class="font-examples">
                <p class="serif">这是衬线字体 (Serif)</p>
                <p class="sans-serif">这是无衬线字体 (Sans-serif)</p>
                <p class="monospace">这是等宽字体 (Monospace)</p>
                <p class="custom-font">这是自定义字体 (Roboto)</p>
            </div>
        </section>

        <section class="demo-section">
            <h2>2. 字体大小和粗细</h2>
            <div class="size-weight-examples">
                <p class="text-small">小号文本 (14px)</p>
                <p class="text-normal">正常文本 (16px)</p>
                <p class="text-large">大号文本 (20px)</p>
                <p class="weight-light">细体文本 (300)</p>
                <p class="weight-normal">常规文本 (400)</p>
                <p class="weight-bold">粗体文本 (700)</p>
            </div>
        </section>

        <section class="demo-section">
            <h2>3. 文本对齐和缩进</h2>
            <div class="alignment-examples">
                <p class="text-left">左对齐文本</p>
                <p class="text-center">居中对齐文本</p>
                <p class="text-right">右对齐文本</p>
                <p class="text-justify">两端对齐文本。这是一段较长的文本，用来演示两端对齐的效果。为了更好地展示效果，这段文字需要足够长，最好能够占据多行。</p>
                <p class="text-indent">这是一段带有首行缩进的文本。为了展示缩进效果，这段文字也需要足够长，最好能够占据多行。我们可以清楚地看到第一行相对于后续行有一定的缩进距离。</p>
            </div>
        </section>

        <section class="demo-section">
            <h2>4. 行高和间距</h2>
            <div class="spacing-examples">
                <p class="line-height-small">这是一个行高较小的段落。为了展示效果，这段文字需要多行。这是第二行。这是第三行。</p>
                <p class="line-height-normal">这是一个标准行高的段落。为了展示效果，这段文字需要多行。这是第二行。这是第三行。</p>
                <p class="line-height-large">这是一个行高较大的段落。为了展示效果，这段文字需要多行。这是第二行。这是第三行。</p>
                <p class="letter-spaced">这是一个字母间距加大的文本</p>
                <p class="word-spaced">这是 一个 单词 间距 加大 的 文本</p>
            </div>
        </section>

        <section class="demo-section">
            <h2>5. 文本装饰和效果</h2>
            <div class="decoration-examples">
                <p class="underline">带下划线的文本</p>
                <p class="line-through">带删除线的文本</p>
                <p class="text-shadow-simple">简单阴影效果</p>
                <p class="text-shadow-multiple">多重阴影效果</p>
                <div class="truncate-example">
                    <p class="text-truncate">这是一个很长的文本，将会被截断并显示省略号。这句话的后半部分不会显示。</p>
                </div>
                <div class="multiline-truncate-example">
                    <p class="text-multiline-truncate">这是一个很长的多行文本示例。它将在第三行后被截断。为了演示这个效果，我们需要非常长的文本内容。这段文字将会在第三行结束时显示省略号，后面的内容会被隐藏。</p>
                </div>
            </div>
        </section>

        <section class="demo-section">
            <h2>6. 书写模式</h2>
            <div class="writing-mode-examples">
                <p class="vertical-text-rl">竖排右至左文字</p>
                <p class="vertical-text-lr">竖排左至右文字</p>
            </div>
        </section>
    </div>
</body>
</html>
